<template>
  <view class="news-card" :class="{ top: isTop }">

    <view class="top-tag" v-if="isTop">置顶</view>
    <view class="news-title">{{ title }}</view>
    <view class="news-content">{{ content }}</view>
  </view>
</template>

<script>
export default {
  name: "TopNewsCard",

  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    },
    isTop: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.news-card {
  padding: 15rpx;
  margin: 10rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
}

.top {
  background-color: #fff8e1;
}
.top-tag {
  display: inline-block;
  background-color: #ff9800;
  color: #fff;
  font-size: 24rpx;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
  margin-bottom: 10rpx;
}
.news-title {
  font-weight: bold;
  margin-bottom: 8rpx;
}
.news-content {
  font-size: 28rpx;
  color: #666;
}
</style>